<template>
  <div class="shouye_container">
      <el-container>
        <el-aside width="200px">
            <el-menu
            default-active="2"
            router
            class="el-menu-vertical-demo">
              <el-menu-item index="/"  @click="change">
                  <i class="el-icon-setting"></i>
                  <span slot="title">后台首页</span>
              </el-menu-item>
              <el-menu-item index="/xiangce"  @click="change">
                  <i class="el-icon-setting"></i>
                  <span slot="title">相册管理</span>
              </el-menu-item>
              <el-menu-item index="shangpin1" @click="change">
                  <i class="el-icon-setting"></i>
                  <span slot="title">商品列表</span>
              </el-menu-item>
            </el-menu>
        </el-aside>
        <el-main>
            <div class="crumbs_container">
                <el-tag
                v-for="(item,index) in tags"
                :key="index"
                closable
                @click="$router.push({path:item.path})"
                @close="close(index)"
                :type="item.type">
                {{item.name}}
                </el-tag>
                <el-dropdown class="down" @command="closeTag">
                    <span class="el-dropdown-link">
                    操作<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a">关闭其他</el-dropdown-item>
                    <el-dropdown-item command="b">关闭所有</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <router-view/>
        </el-main>
      </el-container>
  </div>
</template>

<script>
export default {
    data(){
        return{
            tags: [
            { name: '后台首页', path: '/' },
            { name: '相册管理', path: '/xiangce' },
            { name: '商品列表', path: '/shangpin1' }
            ],
            tagName:""
        }
    },
    methods:{
        close(index){
            this.tags.splice(index,1)
        },
        change(){
            let rel = true;
            this.tags.forEach(el=>{
                if(el.name === this.$route.meta.name){
                    rel = false;
                    return
                }
            })

            if(rel){
                this.tags.push({name:this.$route.meta.name,path:this.$route.path})
            }
        },
        closeTag(val){
            console.log(val)
            switch (val) {
               case "a":
                 this.tags = this.tags.filter(el=>{
                     if(el.path == this.$route.path){return el}})
               break;
               case "b":
                 this.tags = [];
                 this.$router.push({path:"/"});
               break;
            }
        }
    }
}
</script>

<style scoped>

.el-aside {
    background-color: #D3DCE6;
    height: 90vh;
  }
  
  .el-main {
    background-color: #E9EEF3;
    /* border: 1px solid #000; */
    height: 90vh;
  }

.crumbs_container
{
    width: 100%;
    height: 5vh;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 999;
}
</style>